// 导入 react 和 react-dom
import React from 'react';
// React18 写法，多了 /client
import ReactDOM from 'react-dom/client';

/* 
  React 插值表达式注意事项：
    1. 基本类型 字符串 和 数字 能直接渲染
    2. 基本类型 布尔值，undefined，null 不会渲染在页面中
    3. 复杂类型 不支持直接 渲染对象，会报错
    
  进阶用法：
    1. 三元表达式
    2. 函数表达式
    3. JSX表达式
*/

// 基本数据类型
const name = 'zs';
const age = 18;

const sayHi = () => {
  return 'hello';
};

const spanNode = <span>我是一个span</span>;

const title = (
  <div>
    <h1>姓名：{name}</h1>
    {/* <h2>年龄：{age}</h2> */}
    <h3>是否已成年：{age >= 18 ? '是' : '否'}</h3>
    <h4>{sayHi()}</h4>
    <h5>动态插入节点：{spanNode}</h5>
  </div>
);

// 渲染react元素，React18写法，先创建跟节点，再渲染
ReactDOM.createRoot(document.getElementById('root')).render(title);
